// 插值#{}   
@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
    .icon-#{$name} {
        background-image: url("/icons/#{$name}.svg");
        position: absolute;
        #{$top-or-bottom}: 0;
        #{$left-or-right}: 0;
    }
}

@include corner-icon("mail", top, left);

// 选择器构建  .header-text-small,.header-text-medium,header-text-big
@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small {
        font-size: $small;
    }

    .#{$class}-medium {
        font-size: $medium;
    }

    .#{$class}-big {
        font-size: $big;
    }
}

@include generate-sizes("header-text", 12px, 20px, 40px);